<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>六一活动</title>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <div v-cloak id="app">
    <div id="main">
      <img class="head-img" src="./images/1@2x.png" width="100%" alt="">

      <div class="banner-rule">
        <div class = "score-box">
            <div class="score1"><p>{{Curr.traitor_win_score}}</p></div>
            <div class="score2"><p>{{Curr.civilian_win_score}}</p></div>
        </div>
      </div>

      <div class="banner-award">
        <div class = "award-box">
          <img class="head-img" src="./images/3@2x.png" width="100%" alt="">
        </div>
      </div>

      <div class="banner-title">
        <div class="box-title">
          <!-- <div class="title-text"> -->
            <img class="head-img" src="./images/4@2x.png" width="100%" alt="">
          <!-- </div> -->
        </div>
        <div class = "activity-box">
           <div class="box-tr" v-for="(item, index) in List" :key="'ranking-' + index" >
              <div :class="{'ranking3': true, 'ranking-1': index === 0, 'ranking-2': index === 1, 'ranking-3': index === 2 }"><p>{{ index +1 }}</p>
              </div>
              <div :class= "{'ranking-img': true, 'border-1': index === 0 , 'border-2': index === 1, 'border-3': index === 2 } ">
                <img  :src="item.image" width="100%" alt="">
              </div>
              <div class="nickname">
                <p>{{item.nickname}}</p>
                <p>ID:{{item.uid}}</p>
              </div>
              <div class="item4">
                <p>战力值</p>
                <p>{{item.total_score}}</p>
              </div>
           </div>
        </div>
      </div>
      <div class="foot">
        <p>本活动解释权归声撩所有，与苹果公司无关</p>
      </div>
      <!-- 消息弹窗 -->
    <div id="over-dialog" v-show="canShowTip">
      <div class="close" @click="canShowTip = false"></div>
      <p>{{ msg }}</p>
      <div class="btn" @click=" canShowTip = false">
        知道啦
      </div>
    </div>
    <!-- end -->
    <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
    </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/tool.js"></script>
<script src="./js/flex.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      listStage:1,
      // baseUrl: 'http://xs.ztaudio-activity.com',
      // baseApiUrl : "http://47.100.52.89",
      baseUrl:'http://ztaudio-activity.kekestar.cn',
      baseApiUrl : "https://sl-api.bianxiangapp.com:8866",
      List:[],
      Curr:[],
      msg: '',
      canShowTip:false,
      overlayShow:false
    },
    computed: {

    },
    mounted() {
      this.getFishWinner()
    },
    methods:{
      closeAllDialog() {
        this.overlayShow = false
        this.canShowTip = false
      },
      changeStage(stage){
        this.listStage = stage
        if(stage==1){
          this.getFishWinner()
        }
        if(stage==2){
          this.getFishPk()
        }
        if(stage == 3){
          // this.getFishGift()
          this.getGifts()
        }
      },
      restlist(){
        this.List = []
      },
      getFishWinner() {
        let _this = this
        _this.restlist()
        kk.get(_this.baseApiUrl + '/room/traitor/user_join_game_rank' , {}, function(res) {
          // console.log(res)
          res = kk.parseBase64(res)
          _this.List = res.data.list
          _this.Curr = res.data.curr
        })
      },

    }
  })
</script>
</html>
